<template>
  <div v-if="visible" class="padding overlay-page">
    <div class="overlay-top">
      <el-tooltip content="返回" placement="top">
        <el-button icon="el-icon-back" circle @click="close"></el-button>
      </el-tooltip>
      <span class="margin-left">监测点数据</span>
    </div>
    <el-tabs v-model="currentTab">
      <el-tab-pane label="源数据" name="DATA"></el-tab-pane>
      <el-tab-pane label="分析数据" name="CHART"></el-tab-pane>
    </el-tabs>
    <div class="tab-content">
      <data-panel v-if="currentTab === 'DATA'" :indicator-code="indicatorCode"></data-panel>
      <chart-panel v-else-if="currentTab === 'CHART'" :indicator-code="indicatorCode"></chart-panel>
    </div>
  </div>
</template>

<script>
import DataPanel from '@/views/energy-use-model/data-panel'
import ChartPanel from '@/views/energy-use-model/chart-panel'

export default {
  name: 'data-detail',
  components: {
    DataPanel,
    ChartPanel,
  },
  props: {
    indicatorCode: {
      type: String,
      required: true,
    },
  },
  data () {
    return {
      visible: false,
      currentTab: 'DATA',
    }
  },
  methods: {
    open () {
      this.visible = true
    },
    close () {
      this.visible = false
    },
  },
}
</script>

<style scoped>
.overlay-page {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  background: #fff;
}
.tab-content {
  height: calc(100% - 90px);
}
</style>
